<template>
  <div id="index1">
    <header>
      <div class="headerWarp" >
        <div class="menu">
            <img @click="isShowMenu=!isShowMenu" class="icon_menu" src="../assets/images/icon-Home.png" alt="">
            <transition name="fade">
            <div class="nenuWarp" v-if="isShowMenu">
              <div class="pic">
                <img src="../assets/images/logo.png" alt="">
              </div>
              <ul>
                <li v-for="(item,index) in menuArr" :key="index">
                  <div @click="pageChange(item.path)">
                    <h4 :class="{activePath:item.path==$route.path}">{{item.name}}</h4>
                    <i v-show="item.path==$route.path" class="el-icon-caret-top"></i>
                  </div>
                </li>
              </ul>
            </div>
            </transition>
        </div>
        <div class="lang_sign">
          <div class="sign">
            <el-dropdown @command="handleCommand" trigger="click">
              <span>
                <img class="lang_icon" src="../assets/images/lang_index1.png" alt="">
                {{$t('menu.lang')}}
                </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="zh">中文</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="sign"  @click="dialogFormVisible = true">
            <img class="sign_icon" src="../assets/images/sign_index1.png" alt="">
            <span>{{$t('menu.sign')}}</span>
          </div>
        </div>
        </div>
    </header>
     <div id="signIn" class="signIn">
       <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="SIGN IN" :visible.sync="dialogFormVisible" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
            <el-form :model="form" >
                <el-row>
                  <span class="inputLabel">User Name</span>
                    <el-col :span="24" style="height:50px">
                        <el-form-item >
                            <el-input size='mini'  v-model="form.name" autocomplete="off" placeholder="Your Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="height:50px">
                      <span class="inputLabel">Password</span>
                        <el-form-item >
                            <el-input size='mini' type="password"  v-model="form.password" autocomplete="off" placeholder="Your Password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <span class="inputLabel creatAccount" @click="toCreate">Create An Account？</span>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="success" @click="dialogFormVisible = false">Login</el-button>
                <div class="forget">  
                  <span @click="toResertPass">Forgot Your Password?</span>
                  <br/>
                  <span @click="toResertPass">Forgot Your UserName?</span>
                </div>
              
            </div>
        </el-dialog>
        <!-- 创建账户： -->
         <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="LET'S  MAKE  IT OFFICIAL  CREATE  YOUR  ACCOUNT" :visible.sync="dialogCreatAccount" width="50%" :show-close='false' :close-on-click-modal='false'
  center>
              <el-form :model="createForm"  label-width="130px">
                <el-row>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='First Name'>
                            <el-input size='mini'  v-model="createForm.name" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="24" style="height:50px">
                        <el-form-item label='Last Name'>
                            <el-input size='mini' type="text"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='password'>
                            <el-input size='mini' type="password"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="24" style="height:50px">
                        <el-form-item label='Confirm Password'>
                            <el-input size='mini' type="password"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="success" @click="CreatAccount">Create Account</el-button>
                <div class="forget">  
                  <span  @click="backToSign">Already Have An Account?</span>
                </div>
            </div>
        </el-dialog>
         <!-- 重置密码： -->
         <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="PASSWORD RESET" :visible.sync="dialogReset" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
              <el-form :model="resertForm"  label-width="130px">
                <p class="resertTips">Please Enter The Email Address For Your Account.Veriflcation Code Will Be Sent To You.Once You Have Received The Veriflcation Code,You will Be Able To Choose A New Password For Your Account.</p>
                <el-row>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='Email Address*'>
                            <el-input size='mini'  v-model="resertForm.name" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="dialogReset=false">Submit</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      visible: false,
      isHomePage: "isHomePage",
      menuArr: [
        {
          path: "/home",
          name: this.$t("menu.Home")
        },
        {
          path: "/about",
          name: this.$t("menu.About")
        },
        {
          path: "",
          name: "Careers"
        },
        {
          path: "/visitor",
          name: "Visitor Registration"
        },
        {
          path: "/supplier",
          name: "Supplier Management"
        },
        {
          path: "/contact",
          name: "Contact Us"
        },
        {
          path: "/event",
          name: "Event"
        }
      ],
      //sign in dialog:
      dialogFormVisible: false,
      form: {},
      dialogCreatAccount: false,
      createForm: {},
      resertForm: {},
      dialogReset: false,
      isShowMenu: false
    };
  },
  methods: {
    showMenu() {
      this.isShowMenu = !this.isShowMenu;
    },
    pageChange(path) {
      this.$router.push(path);
      this.isShowMenu = false;
    },
    handleCommand(command) {
      // let a=command=='zh'?'中文':'English';
      this.$message("success");
      this.$i18n.locale = command;
      this.menuArr = [
        {
          path: "/home",
          name: this.$t("menu.Home")
        },
        {
          path: "/about",
          name: this.$t("menu.About")
        },
        {
          path: "",
          name: "Careers"
        },
        {
          path: "/visitor",
          name: "Visitor Registration"
        },
        {
          path: "/supplier",
          name: "Supplier Management"
        },
        {
          path: "/contact",
          name: "Contact Us"
        },
        {
          path: "/event",
          name: "Event"
        }
      ];
    },
    //sign:
    toCreate() {
      this.dialogFormVisible = false;
      this.dialogCreatAccount = true;
    },
    CreatAccount() {
      this.dialogCreatAccount = false;
    },
    backToSign() {
      this.dialogFormVisible = true;
      this.dialogCreatAccount = false;
    },
    toResertPass() {
      this.dialogFormVisible = false;
      this.dialogReset = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
#index1 {
  width: 100%;
  height: 100%;
  background-color: #fff;
  //   background-color: rgba(126, 126, 129, 1);

  .main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 100px;
  }
}
header{
  background-color: #fff;

}
.headerWarp {
  height: 100px;
  width: 90%;
  position: fixed;
  left: 5%;
  top: 0;
  padding: 19px 0;
  z-index: 2000;
  color: #fff;
  background-color: #fff;
  border-bottom: 2px solid rgba(115, 115, 115, 0.7);
 
  .menu {
    float: left;
    margin-left: 70px;
    padding-top:5px;
    cursor: pointer;
    position: relative;
    .nenuWarp {
      position: absolute;
      left: -100%;
      top: 100%;
      background-image: url("../assets/images/menu.png");
      background-size: 100%;
      z-index: 2001;
      width: 350px;
      height: 550px;
      padding: 30px 10px;
      color: rgba(255, 255, 255, 0.6);

      ul {
        li:hover {
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
    .icon_menu {
      width: 60px;
    }

    .pic {
      height: 40%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      width: 80%;
      margin: auto;
      text-align: center;
      padding: 20px 10px 30px;
      img {
        height: 100%;
      }
    }
    ul {
      height: 65%;
      padding-top: 6%;
      li {
        text-align: center;
        height: 14%;
        cursor: pointer;
        div {
          display: inline-block;
          height: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          padding-top: 3%;
          i {
            color: rgba(255, 255, 255, 1);
          }
          h4 {
            font-size: 16px;
          }
          h4.activePath {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
  .fade1-enter-active, .fade1-leave-active {
    transition: all .5s;
  }
  .fade1-enter, .fade1-leave-to  {
    opacity: 0;
  }

  .lang_sign {
    float: right;
    width: 30%;
    cursor: pointer;
    color: rgb(88, 180, 72);
    padding-top:10px; 
    .sign {
      width: 48%;
      display: inline-block;
      // margin-right: 20px;
      overflow: hidden;
      .lang_icon{
        position: relative;
        top:8px;
        left:0;
      }
      .sign_icon{
        height: 28px;
         position: relative;
        top:8px;
        left:0;
      }
     
      span {
        color: rgb(88, 180, 72);
        line-height: 30px;
      }
    }
  }
}
.el-dropdown-menu {
  border: none;
}
.el-popper[x-placement^="bottom"] {
  background-color: rgb(88, 180, 72);
}
.el-dropdown-menu__item {
  color: #fff;
}
// sign in:
.inputLabel {
  color: rgb(88, 180, 72);
}
.creatAccount {
  float: right;
  cursor: pointer;
}
.forget {
  text-align: center;
  span {
    display: inline-block;
    color: rgb(88, 180, 72);
    border-bottom: 1px solid rgb(88, 180, 72);
    margin-top: 10px;
    cursor: pointer;
  }
}
.resertTips {
  line-height: 24px;
  color: rgba(115, 115, 115, 1);
}
</style>
